<template>
  <div>
    <BreakSpace label="基本信息" :containerStyle="{ marginBottom: '15px' }" />
    <!-- 表单信息 -->
    <FormPanel ref="formPanel" :list="formInfoList" labelWidth="100" :formType="type" :isSubmitBtn="false" />

    <BreakSpace label="备件列表" :containerStyle="{ marginBottom: '15px' }" />
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :dataSource="dataSource"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => (this.columns = columns)"
    />

    <div class="dialogBottmView">
      <multiuse-button size="small" @click="close">返 回</multiuse-button>
    </div>
  </div>
</template>

<script>
// import
import { dictionary } from '@/utils/dictMixin';
import { getPartTransferDetail} from '@/api/partsmanage/shipment/query';

export default {
  mixins: [dictionary],
  name: "partTransferQueryDetail",
  data() {
    // 这里存放数据
    return {
      type: 'show',
      formInfoList: this.createFormInfoList(),
      columns: this.createTableColumns(),
      dataSource: {}
    }
  },
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  // 方法集合
  methods: {
    async initData() {
      // 初始化表单数据
      this.formInfoList.forEach(x => {
        x.initialValue = this.rowData[x.fieldName];
      });

      // 初始化表格信息
      const detailRes = await getPartTransferDetail(this.rowData.ID);
      if (detailRes.resultCode === 200 && Array.isArray(detailRes.data) && detailRes.data.length > 0) {
        this.dataSource = Object.assign({}, {'total': detailRes.data.length}, {'records': detailRes.data});
      }
    },
    close(refresh) {
      this.$emit('close', refresh || false);
    },
    createFormInfoList() {
      return [
        { type: 'INPUT', label: '服务商代码', fieldName: 'DEALER_CODE' },
        { type: 'INPUT', label: '服务商简称', fieldName: 'DEALER_NAME' },
        { type: 'INPUT', label: '申请单号', fieldName: 'BSTKD' },
        { type: 'INPUT', label: '过账单号', fieldName: 'BSYSDH' },
        { type: 'DATE', label: '过账时间', fieldName: 'BSFYRQ', dateType: 'datetime' },
        { type: 'TEXT_AREA', label: '备注', fieldName: 'REMARK', selfCols: 3 },
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },{
          title: '备件代码',
          dataIndex: 'BJXMBH',
          width: 180,
          sorter: true
        },{
          title: '备件名称',
          dataIndex: 'BJZWMC',
          width: 220,
          summationDataIndex: 'total',
          summation: true,
          summationUnit: '(过账品种合计)',
          sorter: true
        },{
          title: '物料组',
          dataIndex: 'MATERIAL',
          width: 80,
          dictItems:this.createDictList('3054'),
          sorter: true
        },{
          title: '受理单价',
          dataIndex: 'PJHSJE',
          width: 100,
          precision: 2,
          numberFormat: true,
          sorter: true
        },{
          title: '过账数量',
          dataIndex: 'BSFYSL',
          width: 130,
          summation: true,
          summationUnit: '(过账数量合计)',
          sorter: true
        },{
          title: '过账金额',
          dataIndex: 'BSFYJE',
          width: 160,
          precision: 2,
          numberFormat: true,
          summation: true,
          summationUnit: '(过账金额合计)',
          sorter: true
        },{
          title: '开票金额',
          dataIndex: 'PJHSZE',
          precision: 2,
          numberFormat: true,
          sorter: true
        }
      ];
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  //过滤器
  filters: {},
  // 生命周期 - 创建之前
  beforeCreate() {
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  async created() {
    // 初始化数据
    await this.initData();
  },
  // 生命周期 - 挂载之前
  beforeMount() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },
  // 生命周期 - 更新之前
  beforeUpdate() {
  },
  // 生命周期 - 更新之后
  updated() {
  },
  // 生命周期 - 销毁之前
  beforeDestroy() {
  },
  // 生命周期 - 销毁完成
  destroyed() {
  },
  // 如果页面有 keep-alive 缓存功能,这个函数会触发
  //进入的时候触发
  activated() {
  },
  //离开的时候触发
  deactivated() {
  },
}
</script>

<style scoped>
</style>
